import { Component } from 'react'
import { connect } from 'react-redux'
import { View, Button, Text } from '@tarojs/components'

import { add, minus, asyncAdd } from '../../actions/counter'

import './index.less'


// @connect(({ counter }) => ({
//   counter
// }), (dispatch) => ({
//   add() {
//     dispatch(add())
//   },
//   dec() {
//     dispatch(minus())
//   },
//   asyncAdd() {
//     dispatch(asyncAdd())
//   }
// }))
function Index(props) {
  return (
    <View className='index'>
      <Button className='add_btn' onClick={props.add}>+ </Button>
      <Button className='dec_btn' onClick={props.dec}>-</Button>
      <Button className='dec_btn' onClick={props.asyncAdd}>async</Button>
      <View><Text>{props.counter.num}</Text></View>
      <View><Text>Hello, World</Text></View>
    </View>
  )
}

Index = connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add() {
    dispatch(add())
  },
  dec() {
    dispatch(minus())
  },
  asyncAdd() {
    dispatch(asyncAdd())
  }
}))(Index)
export default Index

